/**
 * @author Created by qiush on 2017-06-02.
 */

import {IAttr} from '../../types/IAttr';
import {IAttrValue} from '../../types/IAttrValue';

const borderStyle: IAttrValue[] = [
  {
    name: 'none',
    display: 'none'
  }, {
    name: 'hidden',
    display: 'hidden'
  }, {
    name: 'dotted',
    display: 'dotted'
  }, {
    name: 'dashed',
    display: 'dashed'
  }, {
    name: 'solid',
    display: 'solid'
  }, {
    name: 'double',
    display: 'double'
  }, {
    name: 'groove',
    display: 'groove'
  }, {
    name: 'ridge',
    display: 'ridge'
  }, {
    name: 'inset',
    display: 'inset'
  }, {
    name: 'outset',
    display: 'outset'
  }
];

const overflowStyle: IAttrValue[] = [
  {
    name: 'auto',
    display: 'auto'
  }, {
    name: 'visible',
    display: 'visible'
  }, {
    name: 'hidden',
    display: 'hidden'
  }, {
    name: 'scroll',
    display: 'scroll'
  }
];

const styles: IAttr[] = [
  {
    name: 'display',
    display: 'display',
    type: 'select',
    values: [
      {
        name: 'none',
        display: 'none'
      }, {
        name: 'block',
        display: 'block'
      }, {
        name: 'inline',
        display: 'inline'
      }, {
        name: 'inline-block',
        display: 'inline-block'
      }
    ]
  },

  {
    name: 'opacity',
    display: 'opacity',
    type: 'string',
    placeholder: '0.0 / 0.4 / 1.0 / ...'
  },

  {
    name: 'float',
    display: 'float',
    type: 'select',
    values: [
      {
        name: 'none',
        display: 'none'
      }, {
        name: 'left',
        display: 'left'
      }, {
        name: 'right',
        display: 'right'
      }
    ]
  },

  {
    name: 'clear',
    display: 'clear',
    type: 'select',
    values: [
      {
        name: 'left',
        display: 'left'
      }, {
        name: 'right',
        display: 'right'
      }, {
        name: 'both',
        display: 'both'
      }
    ]
  },

  {
    name: 'position',
    display: 'position',
    type: 'select',
    values: [
      {
        name: 'static',
        display: 'static'
      }, {
        name: 'relative',
        display: 'relative'
      }, {
        name: 'absolute',
        display: 'absolute'
      }, {
        name: 'fixed',
        display: 'fixed'
      }
    ]
  },

  {
    name: 'zIndex',
    display: 'z-index',
    type: 'string',
    placeholder: '10'
  },

  {
    name: 'boxSizing',
    display: 'box-sizing',
    type: 'select',
    values: [
      {
        name: 'content-box',
        display: 'content-box'
      }, {
        name: 'border-box',
        display: 'border-box'
      }
    ]
  },

  {
    name: 'width',
    display: 'width',
    type: 'string',
    placeholder: '10px / 0% / auto ...'
  },

  {
    name: 'minWidth',
    display: 'min-width',
    type: 'string',
    placeholder: '10px / 0% / auto ...'
  },

  {
    name: 'maxWidth',
    display: 'max-width',
    type: 'string',
    placeholder: '10px / 0% / auto ...'
  },

  {
    name: 'height',
    display: 'height',
    type: 'string',
    placeholder: '10px / 0% / auto ...'
  },

  {
    name: 'minHeight',
    display: 'min-height',
    type: 'string',
    placeholder: '10px / 0% / auto ...'
  },

  {
    name: 'maxHeight',
    display: 'max-height',
    type: 'string',
    placeholder: '10px / 0% / auto ...'
  },

  {
    name: 'top',
    display: 'top',
    type: 'string',
    placeholder: '10px / 0% / ...'
  },

  {
    name: 'right',
    display: 'right',
    type: 'string',
    placeholder: '10px / 0% / ...'
  },

  {
    name: 'bottom',
    display: 'bottom',
    type: 'string',
    placeholder: '10px / 0% / ...'
  },

  {
    name: 'left',
    display: 'left',
    type: 'string',
    placeholder: '10px / 0% / ...'
  },

  {
    name: 'margin',
    display: 'margin',
    type: 'string',
    placeholder: '10px / 0% / auto ...',
    details: [
      {
        name: 'marginTop',
        display: 'margin-top',
        type: 'string',
        placeholder: '10px / 0% / auto ...'
      }, {
        name: 'marginRight',
        display: 'margin-right',
        type: 'string',
        placeholder: '10px / 0% / auto ...'
      }, {
        name: 'marginBottom',
        display: 'margin-bottom',
        type: 'string',
        placeholder: '10px / 0% / auto ...'
      }, {
        name: 'marginLeft',
        display: 'margin-left',
        type: 'string',
        placeholder: '10px / 0% / auto ...'
      }
    ]
  },

  {
    name: 'padding',
    display: 'padding',
    type: 'string',
    placeholder: '10px / 0% / auto ...',
    details: [
      {
        name: 'paddingTop',
        display: 'padding-top',
        type: 'string',
        placeholder: '10px / 0% / auto ...'
      }, {
        name: 'paddingRight',
        display: 'padding-right',
        type: 'string',
        placeholder: '10px / 0% / auto ...'
      }, {
        name: 'paddingBottom',
        display: 'padding-bottom',
        type: 'string',
        placeholder: '10px / 0% / auto ...'
      }, {
        name: 'paddingLeft',
        display: 'padding-left',
        type: 'string',
        placeholder: '10px / 0% / auto ...'
      }
    ]
  },

  {
    name: 'color',
    display: 'color',
    type: 'color',
    placeholder: '#fff / white / transparent ...'
  },

  {
    name: 'fontStyle',
    display: 'font-style',
    type: 'select',
    values: [
      {
        name: 'normal',
        display: 'normal'
      }, {
        name: 'italic',
        display: 'italic'
      }, {
        name: 'oblique',
        display: 'oblique'
      }
    ]
  },

  {
    name: 'fontWeight',
    display: 'font-weight',
    type: 'select',
    values: [
      {
        name: 'normal',
        display: 'normal'
      }, {
        name: 'bold',
        display: 'bold'
      }, {
        name: 'lighter',
        display: 'lighter'
      }, {
        name: 'bolder',
        display: 'bolder'
      }
    ]
  },

  {
    name: 'fontSize',
    display: 'font-size',
    type: 'string',
    placeholder: '14px / 1.5em ...'
  },

  {
    name: 'fontFamily',
    display: 'font-family',
    type: 'string',
    placeholder: 'Microsoft Yahei / Serif ...'
  },

  {
    name: 'lineHeight',
    display: 'line-height',
    type: 'string',
    placeholder: 'normal / 1.5 / 30px / 1.5em / 50% ...'
  },

  {
    name: 'textDecoration',
    display: 'text-decoration',
    type: 'select',
    values: [
      {
        name: 'none',
        display: 'none'
      }, {
        name: 'underline',
        display: 'underline'
      }, {
        name: 'overline',
        display: 'overline'
      }, {
        name: 'line-through',
        display: 'line-through'
      }
    ]
  },

  {
    name: 'letterSpacing',
    display: 'letter-spacing',
    type: 'string',
    placeholder: '2px'
  },

  {
    name: 'wordSpacing',
    display: 'word-spacing',
    type: 'string',
    placeholder: '2px'
  },

  {
    name: 'textIndent',
    display: 'text-indent',
    type: 'string',
    placeholder: '2em / -9999px'
  },

  {
    name: 'overflow',
    display: 'overflow',
    type: 'select',
    values: overflowStyle,
    details: [
      {
        name: 'overflowX',
        display: 'overflow-x',
        type: 'select',
        values: overflowStyle
      },
      {
        name: 'overflowY',
        display: 'overflow-y',
        type: 'select',
        values: overflowStyle
      }
    ]
  },

  {
    name: 'textOverflow',
    display: 'text-overflow',
    type: 'select',
    values: [
      {
        name: 'clip',
        display: 'clip'
      }, {
        name: 'ellipsis',
        display: 'ellipsis'
      }
    ]
  },

  {
    name: 'whiteSpace',
    display: 'white-space',
    type: 'select',
    values: [
      {
        name: 'normal',
        display: 'normal'
      }, {
        name: 'nowrap',
        display: 'nowrap'
      }, {
        name: 'pre',
        display: 'pre'
      }, {
        name: 'pre-wrap',
        display: 'pre-wrap'
      }, {
        name: 'pre-line',
        display: 'pre-line'
      }
    ]
  },

  {
    name: 'wordBreak',
    display: 'word-break',
    type: 'select',
    values: [
      {
        name: 'normal',
        display: 'normal'
      }, {
        name: 'break-all',
        display: 'break-all'
      }, {
        name: 'keep-all',
        display: 'keep-all'
      }
    ]
  },

  {
    name: 'textAlign',
    display: 'text-align',
    type: 'select',
    values: [
      {
        name: 'left',
        display: 'left'
      }, {
        name: 'center',
        display: 'center'
      }, {
        name: 'right',
        display: 'right'
      }
    ]
  },

  {
    name: 'verticalAlign',
    display: 'vertical-align',
    type: 'select',
    values: [
      {
        name: 'top',
        display: 'top'
      }, {
        name: 'middle',
        display: 'middle'
      }, {
        name: 'bottom',
        display: 'bottom'
      }
    ]
  },

  {
    name: 'background',
    display: 'background',
    type: 'string',
    placeholder: '#fff ',
    details: [
      {
        name: 'backgroundColor',
        display: 'background-color',
        type: 'color',
        placeholder: '#fff / white / transparent ...'
      }, {
        name: 'backgroundImage',
        display: 'background-image',
        type: 'image',
        placeholder: 'url(...) ...'
      }, {
        name: 'backgroundPosition',
        display: 'background-position',
        type: 'string',
        placeholder: '10px / 0% / left / auto ...'
      }, {
        name: 'backgroundRepeat',
        display: 'background-repeat',
        type: 'select',
        values: [
          {
            name: 'repeat',
            display: 'repeat'
          }, {
            name: 'no-repeat',
            display: 'no-repeat'
          }, {
            name: 'repeat-x',
            display: 'repeat-x'
          }, {
            name: 'repeat-y',
            display: 'repeat-y'
          }
        ]
      }, {
        name: 'backgroundAttachment',
        display: 'background-attachment',
        type: 'select',
        values: [
          {
            name: 'scroll',
            display: 'scroll'
          }, {
            name: 'fixed',
            display: 'fixed'
          }
        ]
      }, {
        name: 'backgroundSize',
        display: 'background-size',
        type: 'string',
        placeholder: 'contain / cover / 10px / ...'
      }
    ]
  },

  {
    name: 'border',
    display: 'border',
    type: 'string',
    placeholder: 'none / 1px solid #eee ... ',
    details: [
      {
        name: 'borderWidth',
        display: 'border-width',
        type: 'string',
        placeholder: '1px / 2px 1.5em ...'
      },
      {
        name: 'borderStyle',
        display: 'border-style',
        type: 'select',
        values: borderStyle
      },
      {
        name: 'borderColor',
        display: 'border-color',
        type: 'color',
        placeholder: '#fff / white / transparent ...'
      },
      {
        name: 'borderTop',
        display: 'border-top',
        type: 'string',
        placeholder: 'none / 1px solid #eee ...',
        details: [
          {
            name: 'borderTopWidth',
            display: 'border-top-width',
            type: 'string',
            placeholder: '1px / 2px 1.5em ...'
          },
          {
            name: 'borderTopStyle',
            display: 'border-top-style',
            type: 'select',
            values: borderStyle
          },
          {
            name: 'borderTopColor',
            display: 'border-top-color',
            type: 'color',
            placeholder: '#fff / white / transparent ...'
          }
        ]
      },
      {
        name: 'borderRight',
        display: 'border-right',
        type: 'string',
        placeholder: 'none / 1px solid #eee ...',
        details: [
          {
            name: 'borderRightWidth',
            display: 'border-right-width',
            type: 'string',
            placeholder: '1px / 2px 1.5em ...'
          },
          {
            name: 'borderRightStyle',
            display: 'border-right-style',
            type: 'select',
            values: borderStyle
          }, {
            name: 'borderRightColor',
            display: 'border-right-color',
            type: 'color',
            placeholder: '#fff / white / transparent ...'
          }
        ]
      },
      {
        name: 'borderBottom',
        display: 'border-bottom',
        type: 'string',
        placeholder: 'none / 1px solid #eee ...',
        details: [
          {
            name: 'borderBottomWidth',
            display: 'border-bottom-width',
            type: 'string',
            placeholder: '1px / 2px 1.5em ...'
          }, {
            name: 'borderBottomStyle',
            display: 'border-bottom-style',
            type: 'select',
            values: borderStyle
          }, {
            name: 'borderBottomColor',
            display: 'border-bottom-color',
            type: 'color',
            placeholder: '#fff / white / transparent ...'
          }
        ]
      },
      {
        name: 'borderLeft',
        display: 'border-left',
        type: 'string',
        placeholder: 'none / 1px solid #eee ...',
        details: [
          {
            name: 'borderLeftWidth',
            display: 'border-left-width',
            type: 'string',
            placeholder: '1px / 2px 1.5em ...'
          }, {
            name: 'borderLeftStyle',
            display: 'border-left-style',
            type: 'select',
            values: borderStyle
          }, {
            name: 'borderLeftColor',
            display: 'border-left-color',
            type: 'color',
            placeholder: '#fff / white / transparent ...'
          }
        ]
      }
    ]
  }
];

export default styles;
